<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/28
  Time: 15:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>商城首页</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
    <style>
        body{
            font-family: 宋体;
            margin: 0;
        }

        .content{
            width: 1000px;
            height: 800px;
            margin-top: 40px;
            margin: auto;
        }
        .new{
            width: 785px;
            height: 800px;
            border: 1px solid black;
            float: left;
        }
        .hot{
            width: 200px;
            height: 700px;
            border: 1px solid blue;
            float: right;
        }
        .new-text{
            width: 100%;
            height: 50px;
        }
        .new-text-left,.new-text-center{
            width: 100px;
            height: 100%;
            float: left;
        }
        .new-text-left{
            color: #EE7621;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            font-size: 18px;
        }
        .new-text-center{
            line-height: 50px;
            font-size: 12px;
            color: #A9A9A9;
        }
        .new-text-right{
            width: 100px;
            height: 100%;
            float: right;
            line-height: 50px;
            font-size: 12px;
            text-align: right;
            color: #EE7621;
        }

        .new-goodslist{
            width: 100%;
            height: 750px;
        }
        .new-goodslist-goods{
            width: 195px;
            height: 250px;
            float: left;
        }
        .new-goodslist-goods-img{
            width: 100%;
            height: 70%;
        }
        .new-goodslist-goods-name,.new-goodslist-goods-sellprice,.new-goodslist-goods-price{
            height: 10%;
            width: 100%;
            padding-left: 10px;
            font-size: 12px;
            line-height: 25px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .new-goodslist-goods-sellprice{
            color: #8B0000;
        }
        .new-goodslist-goods-price{
            color: #848484;
        }
        .new-goodslist-goods-img img{
            width: 100%;
            height: 100%;
        }
        .new-goodslist-goods-sellprice span{
            font-weight: bold;
        }
        .new-goodslist-goods-price span{
            /* 中横线 */
            text-decoration: line-through;
        }
        .hot-title{
            width: 100%;
            height:30px ;
            border-bottom: 1px solid #848484;
            line-height: 30px;
            font-weight: bold;
            font-size: 15px;
            padding-left: 10px;
            box-sizing: border-box;
        }
        .hot-content{
            width: 100%;
            /* 后期高度可不设，更具内容调节 */
            height: 700px;
        }
        .hot-goods{
            width: 80px;
            height: 125px;
            float: left;
            margin: 5px 10px;
        }
        .hot-goods-img{
            width: 78px;
            height: 80px;
            border: 1px solid #848484;
        }
        .hot-goods-img a>img{
            width: 100%;
            height: 100%;
        }
        .hot-goods-name,.hot-goods-price{
            width: 80px;
            height: 21px;
            text-align: center;
            font-size: 12px;
            line-height: 21px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;
        }
        .hot-goods-name{
            font-size: 12px;
        }
        .hot-goods-price{
            color: darkred;
        }
        .hot-goods-price>span{
            font-weight: bold;
        }
    </style>
    <script>
    /*    window.onload=function(){
            alert("aaa");
        }*/
        $(function () {
            <%--新书详情展示--%>
            $.post("${pageContext.request.contextPath}/goods/findNewGoods","",function (data) {
                var str = "";
                for (let i in data){
                    // alert(data[i].image);
                    str = ' <div class="new-goodslist-goods">\n' +
                        '                <div class="new-goodslist-goods-img"><a title="'+data[i].name+'" href="${pageContext.request.contextPath}/goods/details?id='+data[i].id+'">\n' +
                        '                    <img src="${pageContext.request.contextPath}/img/'+data[i].image+'"/>\n' +
                        '               </a> </div>\n' +
                        '                <div class="new-goodslist-goods-name"><a href="${pageContext.request.contextPath}/goods/details?id='+data[i].id+'">\n' +
                        '                    '+data[i].name+'\n' +
                        '                </a></div>\n' +
                        '                <div class="new-goodslist-goods-sellprice">\n' +
                        '                    惊喜价：￥<span>'+data[i].salesprice+'</span>\n' +
                        '                </div>\n' +
                        '                <div class="new-goodslist-goods-price">\n' +
                        '                    市场价：￥<span>'+data[i].marketprice+'</span>\n' +
                        '                </div>\n' +
                        '            </div>'
                    $("#newgoodslist").append(str);
                }
                // alert($("#newgoodslist"));

                // alert(str);
            },"json")
            $.post("${pageContext.request.contextPath}/goods/findHotGoods","",function (data) {
                let str = "";
                for(let i  in data){
                    str = '    <div class="hot-goods" >\n' +
                        '                <div class="hot-goods-img"><a title="'+data[i].name+'" href="${pageContext.request.contextPath}/goods/details?id='+data[i].id+'">\n' +
                        '                <img src="${pageContext.request.contextPath}/img/'+data[i].image+'" />\n' +
                        '            </a></div>\n' +
                        '                <div class="hot-goods-name"><a href="${pageContext.request.contextPath}/goods/details?id='+data[i].id+'">\n' +
                        '                    '+data[i].name+'\n' +
                        '                </a></div>\n' +
                        '                <div class="hot-goods-price">\n' +
                        '                    ￥<span>'+data[i].marketprice+'</span>\n' +
                        '                </div>\n' +
                        '            </div>'
                    $("#hotgoods").append(str);
                }
            },"json")


        })

    </script>
</head>
<body>
<%--商城logo--%>
<%@include file="headtop.jsp"%>
<%--商城分类--%>
<%@include file="headmid.jsp"%>
<%--搜索框引入--%>
<%@ include file="search.jsp"%>


<div class="content" >
    <div class="new">
        <div class="new-text">
            <a  href="javascript:void(0)">
            <div class="new-text-left">
                最新商品
            </div>
             </a>
            <a href="${pageContext.request.contextPath}/goods/findNewGoodsPage?currentPage=1">
            <div class="new-text-center">
                New Products
            </div>
            <div class="new-text-right">
                更多商品...
            </div>
            </a>
        </div>
        <div class="new-goodslist" id="newgoodslist">
<%--            动态刷新新书展示页面--%>
        </div>
    </div>


    <div class="hot">
<%--        热卖商品跳转--%>
        <a href="${pageContext.request.contextPath}/goods/findHotGoodsPage?currentPage=1">
        <div class="hot-title">
            热卖商品
        </div>
        </a>
        <div class="hot-content" id="hotgoods">
            <%--            动态刷新热门图书展示页面--%>
        </div>

    </div>
</div>
<!-- 底栏属性 -->
<%@include file="helpinfo.jsp"%>
<!-- 尾栏 -->
<%@include file="footer.jsp"%>
</body>
</html>
